<template>
  <div class="list-out">
    <van-search
      v-model="value"
      shape="round"
      background="#0eb6ff"
      placeholder="请输入搜索关键词"
      @focus="infoSearch"
    />
    <div class="list">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="item in productsCategories"
          :key="item.id"
          :title="item.name"
          @click="onChange(item.id)"
        />
      </van-sidebar>
      <div class="products">
        <van-card
          @click-thumb="toDetail(item)"
          v-for="item in products"
          :key="item.id"
          :num="item.amount"
          :price="item.price.toFixed(2) + '/斤'"
          :desc="item.desc"
          :title="item.name"
          :thumb="item.coverImage | dalImg"
        >
          <template #tags>
            <van-tag plain type="danger" style="margin-top: 2vw">特价</van-tag>
            <van-tag plain style="margin-left: 1vw">24H发货</van-tag>
          </template>
          <template #footer>
            <van-button
              size="mini"
              type="info"
              style="border-radius: 100%"
              @click="addCartQuickly(item.id)"
              ><van-icon name="cart-o"
            /></van-button>
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { loadProductsAPI } from "../services/products";
import { loadCategoriesAPI } from "../services/categories";
import { addCartAPI } from "../services/carts";
import { Toast } from "vant";
import { getToken } from "../Uitils/auth";

export default {
  name: "List",
  data() {
    return {
      productsCategories: [],
      activeKey: 0,
      products: [],
      value: "",
    };
  },
  created() {
    this.loadCategories().then((data) => {
      console.log(data);
      this.loadProducts(data.data[0].id);
    });
  },
  methods: {
    async loadProducts(id) {
      const res = await loadProductsAPI(id);
      console.log(res);
      this.products = [...res.data];
    },
    async loadCategories() {
      const res = await loadCategoriesAPI();
      console.log(res.data);
      this.productsCategories = [...res.data];
      return res;
    },
    onChange(id) {
      console.log(id);
      let index = this.productsCategories.findIndex((v) => v.id == id);
      console.log(index);
      this.activeKey = index;
      this.loadProducts(id);
    },
    toDetail(obj) {
      console.log(obj);
      console.log(this.$router);
      console.log(this.$route);
      this.$router.push({
        name: "Detail",
        params: {
          id: obj.id,
        },
      });
    },
    addCartQuickly(id) {
      if (getToken()) {
        addCartAPI(id, 1).then((res) => {
          console.log(res);
          Toast(res.msg);
        });
      } else {
        Toast("请先登录");
        this.$router.push({
          name: "Login",
        });
      }
    },
    // onSearch(val) {
    //   Toast(val);
    // },
    // onCancel() {
    //   Toast("取消");
    // },
    infoSearch() {
      this.$router.push({
        name: "Search",
      });
    },
  },
};
</script>

<style>
.list {
  display: flex;
}
.products {
  flex: 1;
}
</style>
